import React, { useEffect } from 'react';
import DataGovernance from '../leftPage/DataGovernance';
import ProjectDelivery from '../rightPage/ProjectDelivery';
import DigitalApplication from '../centerPage/DigitalApplication';
import { generateData } from './utils';

const Dashboard = () => {
  const [data, setData] = React.useState(null);

  useEffect(() => {
    // 初始化数据
    setData(generateData());
  }, []);

  if (!data) return <div>Loading...</div>;

  return (
    <div className="dashboard-container">
      <div className="dashboard-header">
        <h1 className="dashboard-title">美的数据可视化展示大屏</h1>
      </div>
      
      <DataGovernance data={data} />
      <ProjectDelivery data={data} />
      <DigitalApplication data={data} />
    </div>
  );
};

export default Dashboard;